<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">项目管理</span>
			<span class="h2">财务报销</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content " style="margin-bottom: 20px;">
				<div class="clearfix">
					<p class="fl titles">财务报销</p>
					<el-button type="primary" size="small" @click="Reim()" style='margin-top: 5px; margin-left: 10px;'>报销</el-button>
					<div class="fr" >
						<el-input v-model="search" placeholder="请输入单据号" style="width:217px;"></el-input>
						<el-button type="primary" @click="fnSearch">查询</el-button>
					</div>
				</div>
			</div>
			<el-table :data="Datas" border style="width: 100%">
				<el-table-column prop="BillCode" label="单据号"  show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="BillDate" label="日期" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="CreateMan" label="报销人">
				</el-table-column>
				<el-table-column prop="SumMoney" label="报销总额">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
									<el-button size="small" type="primary" @click='look(scope.row.ID)'>查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		
		<el-dialog title="报销明细" :visible.sync="lands1" width="650px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="Bill">
				  <el-form-item label="单据号:">
				    <el-input v-model="Bill.num" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="报销总额:">
				    <el-input v-model="Bill.sumMoney" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="日 期:">
				    <el-input v-model="Bill.data" :disabled="true"></el-input>
				  </el-form-item>
				</el-form>
			</div>
			<div style="margin-top: 15px;">
			<el-table :data="Datas1" border style="width: 100%" height="240">
				<el-table-column
                type="index"
                width="50" >
              </el-table-column>
					<el-table-column prop="MainName" label="姓名">
					</el-table-column>
					<el-table-column prop="RegionName" label="行政区域">
					</el-table-column>
					<el-table-column prop="LevyCategoryStr" label="征收项目" >
					</el-table-column>
					<el-table-column prop="SumMoney" label="金额">
					</el-table-column>
			</el-table>
			</div>
			<span slot="footer" class="dialog-footer">
			    <!--<el-button @click="lands1 = false">取 消</el-button>-->
			    <el-button type="primary" @click="lands1 = false">确 定</el-button>
		    </span>
		</el-dialog>
		<!--<el-dialog title="新建报销" :visible.sync="lands1" width="50%">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="Bill">
				  <el-form-item label="单据号:">
				    <el-input v-model="Bill.num"></el-input>
				  </el-form-item>
				  <el-form-item label="报销总额:">
				    <el-input v-model="Bill.sumMoney"></el-input>
				  </el-form-item>
				  <el-form-item label="日 期:">
				    <el-input v-model="Bill.data"></el-input>
				  </el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="lands1 = false">取 消</el-button>
			    <el-button type="primary" @click="lands1 = false">确 定</el-button>
		    </span>
		</el-dialog>-->
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "pay",
  data() {
    return {
      reim: false,
      loading: false,
      labelPosition: "left",
      lands1: false,
      pages: 1, //分页页码
      total: 1, //条数
      search: "",
      Datas: [],
      Bill: {},
      Datas1: []
    };
  },
  created() {
    this.getFinList(this.pages);
  },
  methods: {
    //搜索
    fnSearch() {
      this.loading = true;
      this.pages = 1;
      this.$post(api.getFinList, {
        Para: {
          KeyWork: this.search,
          ProjectID: sessionStorage.ProjectID
        },
        PageSize: 10,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.Datas = response.Data.Data;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //分页
    handleCurrentChange(val) {
      this.getFinList(val);
    },
    //获取列表
    getFinList(index) {
      this.loading = true;
      this.$post(api.getFinList, {
        Para: {
          KeyWork: "",
          ProjectID: sessionStorage.ProjectID
        },
        PageSize: 10,
        PageIndex: index - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.Datas = response.Data.Data;
            this.total = response.Data.Items ? response.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //查看
    look(id) {
      this.Bill.num = ""; //单据号
      this.Bill.data = ""; //单据日期
      this.Bill.sumMoney = ""; //单据总额
      this.Datas1 = [];
      this.$get(api.getbill + "/" + id).then(res => {
        this.Bill.num = res.data.Data.PayMaster.BillCode; //单据号
        this.Bill.data = res.data.Data.PayMaster.BillDate; //单据日期
        this.Bill.sumMoney = res.data.Data.PayMaster.SumMoney; //单据总额
        this.Datas1 = res.data.Data.PayDetails;
      });
      this.lands1 = true;
    },
    del(index) {},
    //财务报销
    Reim() {
      this.loading = true;
      this.$get(api.getbilladd + "/" + sessionStorage.RegionID)
        .then(res => {
          this.loading = false;
          if (res.data.isOK == true && res.data.state == 200) {
            this.$message({
              message: "报销成功",
              type: "success"
            });
            this.getFinList();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
      //  	this.Reim = true
    }
  }
};
</script>

<style>
.asds {
  position: relative;
  z-index: 9999;
}
</style>